<template>
    <div>
      <div class="content common_bg_fff">
        <input type="text" :placeholder="placeholderText" class="phone font_999_30" v-model="phone">
        <span class="getyzm font_333_30" @click="getYZM">{{getYzm_text}}</span>
      </div>
      <div class="content common_bg_fff">
        <input type="text" placeholder="请输入验证码" class="font_999_30 yzm" v-model="yzm">
      </div>

      <div class="btn font_fff_36" @click="bind">确定</div>

      <toast v-model="showPositionValue" type="text" :time="1500" is-show-mask :text="showPositionValueTEXT" position="middle"></toast>
    </div>
</template>

<script>
  import { Toast } from 'vux'
  import lu from '../../assets/public.js'
    export default {
      name: '',
      components: {
        Toast
      },
      data() {
        return {
          title:'绑定手机',
          placeholderText:'请输入手机号',
          getYzm_text:'获取验证码',
          dis_click:false,
          phone:'',
          yzm:'',
          showPositionValue:false,
          showPositionValueTEXT:''
        }
      },
      created () {
        this.setTitle(this.title)
      },
      mounted: function () {

      },
      methods: {
        getYZM(){
          if(this.dis_click) return
          this.dis_click = true

          if(!lu.regCheck(this.phone, /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/)){
            this.placeholderText = '手机号码格式不正确'
            this.phone = ''
            return
          }

          let n = 60
          let _this = this
          let set = setInterval(function(){
            n--
            _this.getYzm_text = n+'s'
            if(n<=0){
              clearInterval(set)
              _this.dis_click = false
              _this.getYzm_text = '获取验证码'
            }
          },1000)

          this.axios.post('/home/Bundtel/sendCode',{
            token:this.$store.state.token,
            tel:this.phone
          }).then((res)=>{
              this.showPositionValue = true
              this.showPositionValueTEXT = res.data.msg
          })
        },
        bind(){
          if(!this.phone||!this.yzm){
            this.showPositionValueTEXT = '内容不完整'
            this.showPositionValue = true
            return
          }
//          console.log(2)
          this.axios.post('/home/Bundtel/confirmBund',{
            token:this.$store.state.token,
            tel:this.phone,
            code:this.yzm
          }).then((res)=>{
            if(res.data.code==200){
              this.$router.push('/userCenter')
              this.$store.commit('bind',1)
            }else{
              this.showPositionValue = true
              this.showPositionValueTEXT =res.data.msg
            }
          })
        }
      }
    }
</script>

<style scoped>
  @import "../../assets/public.css";
  @import "//at.alicdn.com/t/font_814275_a49o0xc0z4m.css";

  .content{
    width:6.62rem;
    height:.88rem;
    border-radius: .08rem;
    margin:.5rem auto;
    display: flex;
    align-items: center;
  }
  .phone{
    width:4.4rem;
    height:.5rem;
    line-height: .5rem;
    box-sizing: border-box;
    padding-left:.3rem;
    border-right:1px solid #ddd;
  }
  .getyzm{
    display: inline-block;
    width:2.19rem;
    text-align: center;
  }
  .yzm{
    width:100%;
    height:.5rem;
    line-height: .5rem;
    box-sizing: border-box;
    padding-left:.3rem;
  }
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: 1.45rem auto 0;
    border-radius: 5px;
  }
</style>
